{% extends "rudiment_index.html" %}
{% load staticfiles %}
{% load tz %}
{% load change %}
{% block breadcrumb %}主机信息展示{% endblock %}

{% block content %}

    <div class="row">
            <div class="well well-sm">
                {% if hostip or hostname %}
                               当前主机IP: <span style="color: red;margin-left: 3px"><i>{{ hostip }}</i></span><span style="margin-left: 10px"></span> 当前Hostname: <span style="color: red;margin-left: 3px"><i>{{ hostname }}</i></span>
                {% else %}
                    当前主机IP: <span style="color: red;margin-left: 3px"><i>10.64.10.64</i></span><span style="margin-left: 10px"></span> 当前Hostname: <span style="color: red;margin-left: 3px"><i>test</i></span>
                {% endif %}
                &nbsp;&nbsp;&nbsp
            </div>

    </div>

     <div class="row">
        <form class="form form-inline" action="/charts/info_show" method="POST">
             {% csrf_token %}
            <div class="well well-sm">
{#                主机名称:&nbsp;<input type="text" name="hostname" value="{{ hostname }}" class="form-control  input-sm" size="10" />#}
                主机ip:&nbsp;        <input type="text" name="hostip" value="{{ hostip }}" class="form-control  input-sm" size="10" />

                <div class="btn-group">
                    <input type="submit" class="btn btn-primary btn-sm" onclick="showLoading()"  value="搜索"/>
                </div>
            </div>
        </form>
    </div>



<div id="a" style="width: 730px;height:300px;margin: 0;padding: 0">
<div class="col-sm-offset-5 col-sm-2" style="margin-bottom: 10px"><span style="color: black"><i></i></span>  </div>

<div id="container" style="height: 100%;margin: 0;padding: 0"></div>
<div class="col-sm-offset-5 col-sm-2" style="margin-bottom: 10px"><span style="color: black"><i>内存百分比(%)</i></span>  </div>

<div id="container2" style="height: 100%;margin: 0;padding: 0"></div>
<div class="col-sm-offset-5 col-sm-2" style="margin-bottom: 10px"><span style="color: black"><i>磁盘百分比(%)</i></span>  </div>

<div id="container3" style="height: 100%;margin: 0;padding: 0"></div>
<div class="col-sm-offset-5 col-sm-4" style="margin-bottom: 10px;"><span style="color: black"><i>系统Cpu利用率(%)</i></span>  </div>



{# <div id="container4" style="height: 100%;margin: 0;padding: 0"></div>#}
{#        <div class="col-sm-offset-5 col-sm-3" style="margin-bottom: 10px"><span style="color: black"><i>IO</i><span style="color: red;margin-left: 5px">红色:I</span><span style="color: #526471;margin-left: 5px">藏青:O</span></span>  </div>#}
{##}

 <div id="container4" style="height: 100%;margin: 0;padding: 0"></div>
        <div class="col-sm-offset-5 col-sm-5" style="margin-bottom: 10px"><span style="color: black"><i>流量<span style="color: red;margin-left: 5px">红:进</span><span style="color:#526471;margin-left: 5px">藏青:出</span></span> </i></span> <span style="margin-left: 5px">单位(k)</span> </div>

 <div id="container5" style="height: 100%;margin: 0;padding: 0"></div>
<div class="col-sm-offset-5 col-sm-2" style="margin-bottom: 10px"><span style="color: black"><i>默认</i></span>  </div>

</div>

<script>
var dom1 = document.getElementById("container");
var myChart1 = echarts.init(dom1);
var app1 = {};
$.get("/charts/info_type_mem/?hostip={{ hostip }}").done(function (data) {
    if (data){
        {#alert(data)#}
        var datas = JSON.parse(data);
        {#alert(datas)#}
        option = null;
        option = {
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: datas.time
                {#data: ['5/min', '10/min', '15/min', '20/min']#}
            },
            yAxis: {
                type: 'value',
                 max:100
            },
            series: [{
                data: datas.mem,
                {#data: [20, 40, 45, 50, 55, 70, 80,100],#}
                type: 'line',
                areaStyle: {}
    }]
};
;
if (option && typeof option === "object") {
    myChart1.setOption(option, true);
}
    }
});


</script>


<script>
var dom2 = document.getElementById("container2");
var myChart2 = echarts.init(dom2);
var app1 = {};
$.get("/charts/info_type_disk/?hostip={{ hostip }}").done(function (data) {
    if (data){
        {#alert(data)#}
        var datas = JSON.parse(data);
        {#alert(datas)#}
        option = null;
        option = {
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: datas.time
                {#data: ['5/min', '10/min', '15/min', '20/min']#}
            },
            yAxis: {
                {#type: 'value'#}
                 max:100
            },
            series: [{
                data: datas.disk,
                {#data: [20, 40, 45, 50, 55, 70, 80,100],#}
                type: 'line',
                areaStyle: {}
    }]
};
;
if (option && typeof option === "object") {
    myChart2.setOption(option, true);
}
    }
});


</script>



<script>
var dom3 = document.getElementById("container3");
var myChart3 = echarts.init(dom3);
var app1 = {};
$.get("/charts/info_type_cpu/?hostip={{ hostip }}").done(function (data) {
    if (data){
        {#alert(data)#}
        var datas = JSON.parse(data);
        {#alert(datas)#}
        option = null;
        option = {
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: datas.time
                {#data: ['5/min', '10/min', '15/min', '20/min']#}
            },
            yAxis: {
                type: 'value',
                max:100
            },
            series: [{
                data: datas.cpu,
                {#data: [20, 40, 45, 50, 55, 70, 80,100],#}
                type: 'line',
                areaStyle: {}
    }]
};
;
if (option && typeof option === "object") {
    myChart3.setOption(option, true);
}
    }
});


</script>



<script>
$.get("/charts/info_type_eth/?hostip={{ hostip }}").done(function (data) {
    if (data) {
        var datas = JSON.parse(data)
        {#alert(data)#}
        var dom4 = document.getElementById("container4");
        var myChart4 = echarts.init(dom4);
        var app = {};

        option = null;
        option = {
            xAxis: {
                type: 'category',
                data: datas.time
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: datas.traffic_in,
                    type: 'line'
                },
                {
                    data: datas.traffic_out,
                    type: 'line'
                },

            ]
        };
        ;
        if (option && typeof option === "object") {
            myChart4.setOption(option, true);
}
    }
});














{##}
{##}
{#var dom = document.getElementById("containe5");#}
{#var myChart = echarts.init(dom);#}
{#var app = {};#}
{#    $.get("/charts/get_eth/").done(function (data) {#}
{#        if (data) {#}
{#            alert(data)#}
{#            datas = JSON.parse(data);#}
{#            option = null;#}
{#            option = {#}
{#                xAxis: {#}
{#                    type: 'category',#}
{#                    data: datas.time#}
{#                },#}
{#                yAxis: {#}
{#                    type: 'value'#}
{#                },#}
{#                series: [#}
{#                    {#}
{#                        data: datas.traffic_in,#}
{#                        type: 'line'#}
{#                    },#}
{#                    {#}
{#                        data: datas.traffic_out,#}
{#                        type: 'line'#}
{#                    },#}
{##}
{#                ]#}
{#            };#}
{#            ;#}
{#            if (option && typeof option === "object") {#}
{#                myChart.setOption(option, true);#}
{#            }#}
{#       }#}
{#{);#}

</script>

{% endblock %}
